<template>
    <div>
        <h2>home 下的管理列表组件</h2>
        
        <!-- 管理列表 -->
        <el-table :data="arrs">
            <!-- <el-table-column prop="id" label="id"> </el-table-column> -->
            <el-table-column prop="name" label="食品/人物"> </el-table-column>
            <el-table-column prop="text" label="介绍"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                >
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                >
                </template>
            </el-table-column>
        </el-table>


        <!-- 弹窗 -->
        <el-dialog
        title="编辑"
        :visible.sync="dialogFormVisible"
        >
        <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="文本" :label-width="formLabelWidth">
            <el-input v-model="form.text" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="fntrue">确 定</el-button>
        </div>
        </el-dialog>



    </div>
</template>
<script>
import instance from "../../api/index";
export default {
    name:"HomePerson",
    data() {
        return {
            arr1: null,
            arr2: null,
            arrs: null,
            form: {
                id: "0",
                name: "姓名",
                text: "文本",
                type: "aa"
            },
            dialogFormVisible: false,
            formLabelWidth: "120px",
        }
    },
    methods:{
        async getarrs() {
            let { data } = await instance.get("/homeperson");
            // console.log("用户列表3", data);
            
            this.arr1 = data.user
            this.arr2 = data.food
            this.arrs = this.arr1.concat(this.arr2)
            // console.log("用户列表4", this.arr1, this.arr2, this.arrs)
        },
        fntrue(){
            // 弹框确认按钮
            this.dialogFormVisible = false;
            this.editHomeUser()
        },
        handleEdit(a, b){   //点击编辑按钮
            this.dialogFormVisible = !this.dialogFormVisible;
            this.form.name = b.name;
            this.form.text = b.text;
            this.form.id = b.id;
            this.form.type = b.type;
        },
        // 编辑业务
        async editHomeUser() {
            let name = this.form.name;
            let text = this.form.text;
            let id = this.form.id;
            let type = this.form.type
            //   console.log("编辑业务", name, text);
            let { data } = await instance.put("/homeperson/edit/" + id, {
                name,
                text,
                type
            });
            await instance.put("/homeuser/edit/" + id, {
                name,
                text,
            });
            await instance.put("/homefood/edit/" + id, {
                name,
                text,
            });
            //   console.log(data);
            this.getarrs();
        },
        // 删除业务
        async deleteHomeUser(index, row) {
            if(row.type === "user"){
                console.log(151551)
                let { data } = await instance.delete("/homeperson1/" + index);
                console.log(data);

            }else{
                let { data } = await instance.delete("/homeperson2/" + row.id);
            }
            
            
            this.getarrs();
        },
        handleDelete(a, b){ //删除按钮
            //用户行为
            console.log("闪闪闪", a, b);
            //   this.i = i
            this.$confirm("确定删除该条信息吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
            console.log("删除");
            this.deleteHomeUser(a, b);
            })
            .catch(() => {
            console.log("取消");
            });
        },

    },
    created(){
        this.getarrs();
    }
}
</script>
<style scoped>
    
</style>